<template>
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="add">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--显示-->
    <div v-show="show" class="show">
      <Row :gutter="16">
        <i-col span="8" v-for="(Img,index) in Img">
          <img class="img" :src="Img.imageLocation" alt="">
          <p style="font-weight: bold"><span>图片跳转地址：</span><span>{{Img.uri}}</span></p>
          <p style="font-weight: bold"><span>图片使用情况：</span><span v-if="Img.state == true"
                                                                 style="color: red">使用中</span><span v-else
                                                                                                    style="color: red">关闭中</span>
          </p>
          <p>
            <Button size="small" type="info" @click="compile(Img,index)">编辑</Button>
            <Button size="small" type="error" @click="remove(Img,index)">删除</Button>
          </p>
        </i-col>
      </Row>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="bus" class="bus">
      <div class="add_style">
        <span style="width: 90px;">图片跳转地址:</span>
        <Input v-model="Param.uri" placeholder="" style="width: 300px"></Input>
      </div>
      <div class="add_style">
        <span style="width: 90px;">图片使用情况:</span>
        <i-switch v-model="Param.state" size="large">
          <span slot="open">开启</span>
          <span slot="close">禁用</span>
        </i-switch>
      </div>
      <div class="add_style">
        <span style="width: 90px;">图片:</span>
        <div>
          <upload :echo="echo" @returnValue="returnValue1"></upload>
        </div>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="save">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="save1">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>
  </div>
</template>

<script>
  import upload from '../module/upload.vue';
  import paging from '../module/paging.vue';

  export default {
    components: {
      upload, paging
    },
    data() {
      return {
        URL: this.$api.url,
        /*分页*/
        all: 1,
        cur: 1,
        /*隐藏显示*/
        table: true,
        table2: false,
        show: true,
        bus: false,
        addBtn: false,
        compileBtn: false,
        /*显示图片*/
        Img: [],
        /*上传图片*/
        file: '',
        echo: '',
        /*参数*/
        Param: {
          id: '',
          imageLocation: '',
          state: false,
          uri: '',
          createUser: '',
        }
      }
    },
    mounted() {
      window.scrollTo(0, 0);
      this.Param.createUser = localStorage.getItem('ms_userid');
      this.get(this.URL + '/image/admin/select/list/' + this.cur)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.URL + '/image/admin/select/list/' + this.cur)
      },
      /*图片*/
      returnValue1(data) {
        this.echo = '';
        this.file = data;
      },
      /*添加*/
      add() {
        this.table = false;
        this.table2 = true;
        this.show = false;
        this.bus = true;
        this.addBtn = true;
      },
      save() {
        let data = {
          state: this.Param.state,
          uri: this.Param.uri,
        };
        this.post(data, this.URL + '/image/admin/add/image')
      },
      /*编辑*/
      compile(Img, index) {
        this.table = false;
        this.table2 = true;
        this.show = false;
        this.bus = true;
        this.compileBtn = true;
        this.Param.uri = Img.uri;
        this.Param.id = Img.id;
        this.Param.state = Img.state;
        this.echo = Img.imageLocation;
      },
      save1() {
        this.post(this.Param, this.URL + '/image/admin/update/image')
      },
      /*删除*/
      remove(Img, index) {
        let data = {
          id: Img.id,
          imageLocation: Img.imageLocation,
        };
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          data: JSON.stringify(data),
          url: this.URL + '/image/delect/image',
        }).then((res) => {
          this.get(this.URL + '/image/admin/select/list/' + this.cur)
        })
      },
      /*返回*/
      back() {
        this.$router.go(0)
      },
      /*axios请求*/
      post(data, url) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", this.file);
        formData.append("imge", JSON.stringify(data));
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(url, formData, config).then(function (res) {
          _this.$router.go(0);
        })
      },
      get(url, cur) {
        this.$axios.get(url).then((res) => {
          this.Img = res.data.lists;
          this.all = res.data.totalPage;
        });
      },
    }
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }
  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
  }

  .wrapper .show .img {
    width: 100%;
    height: 250px;
    padding-top: 20px;
  }
</style>
